<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title></title>

    <link rel="stylesheet" href="css/iconfont/iconfont.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/reset.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/css/password.css" />
    <link href="css/css/lyz.calendar.css" rel="stylesheet" type="text/css" />

    <style>
        th {
            text-align: center;
        }
        .password .usermes {
            padding-top: 0;
        }
        .mestop {
            color: #fff;
            width: 100%;
            height: 34px;
            background: #3498db;
            border-radius: 3px;
        }
        .usermes .table1 tr {
            border:1px solid rgba(153,153,153,0.5);
        }
        .registyDetail .goodmes {
            display: flex;
            justify-content: center;
        }
        .registyDetail .goodmes .img {
         width: 60px;
            height: 60px;
            background: #d8d8d8;
            border-radius: 2px;
            overflow: hidden;
        }
        .registyDetail .goodmes .img img {
            width: 100%;
        }
        .registyDetail .goodmes .rightname {
            margin-left: 10px;
        }
        table button{
            width:100px;
            height:34px;
            background:rgba(52,152,219,1);
            border-radius:3px;
            color: #fff;
        }

.dataTwo .row {
    padding: 0 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.dataTwo .row .box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.dataTwo .row .left {
   width: 400px;
   margin-bottom: 20px;
}
.dataTwo .row .right {
   width: 600px;
   margin-left: 20px;
   line-height: 34px;
   margin-bottom: 20px;
}
.dataTwo .row .box span {
   width: 70px;
}
.dataTwo .row .right span {
   width: 40px;
}
.dataTwo .row .box .inp {
    width: 180px;
    height: 34px;
    border:1px solid rgba(153,153,153,1);
}
.dataTwo .row .box button {
    color: #fff;
    width:60px;
    height:34px;
    margin-left: 20px;
    background:rgba(52,152,219,1);
    border-radius:3px;
}
.dataTwo .left select {
    width: 300px;
    height: 34px;
    border:1px solid rgba(153,153,153,1);
}
    </style>
</head>

<body>
    <div class="registyDetail">
        <div class="password">

            <div class="mesinp2">
                <div class="usermes">
                    <div class="cashmes" style="color:#000;line-height:50px;">当前注册积分余额：<span style="color:#E31C1C;">$500</span>
                    </div><div class="dataTwo  hidden-sm hidden-xs">
                            <div class="row" style="margin:10px -20px;">
                                <div class="box left">
                                    <span>事件类型</span>
                                    <select>
                                        <option>请选择</option>
                                    </select>
                                </div>
                                <div class="box right">
                                    <span>时间</span><input type="text" class="inp" id="test1" placeholder="请选择时间">&nbsp;至&nbsp;<input
                                        type="text" class="inp" id="test2" placeholder="请选择时间"><button>查询</button>
                                </div>
                            </div>
                        </div>
                    <div class="table-responsive">
                        <table class="table table-hover" style="text-align:center;color:#000">
                            <tr class="active" style="background:#bbb;">
                                <th>奖金类型</th>
                                <th>详细说明</th>
                                <th>金额($)/手续费($)</th>
                                <th>时间</th>
                            </tr>
                            <tr>
                                <td>商务奖</td>
                                <td>您将$500的注册积分卖出，平台收取10%的手续费</td>
                                <td style="color:#E31C1C;">500/50</td>
                                <td>2018-12-28 22:55:27</td>
                            </tr>
                            <tr>
                                <td colspan="4">暂无更多数据</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/plugins/layer/layer.min.js"></script>
    <script src="js/lyz.calendar.min.js" type="text/javascript"></script>

    <script>

        $("#sureTo").click(function () {
            layer.open({
                title: '温馨提示',
                content: '请收到货后，再确认收货！否则您可能钱货两空！',
                area: ['300px']
                , btn: ['确定', '取消']
                , yes: function (index, layero) {
                    //确定的回调
                }
            });
        });

        //嵌套在指定容器中\
        laydate.render({
            elem: '#test1' //指定元素
        });
        laydate.render({
            elem: '#test2' //指定元素
        });

    </script>
</body>

</html>